<%--
  Created by IntelliJ IDEA.
  User: Kirito
  Date: 2022/3/8
  Time: 15:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <h1 class="text-center">班级出勤明细</h1>
    <form class="form-inline">
        <label>按班级查找</label>
        <select id="class" class="form-control">
            <option value="0">--所有班级--</option>
        </select>
        <label>按点名人查找</label>
        <select id="user" class="form-control">
            <option value="0">--所有点名人--</option>
        </select>
    </form>
    <table class="table table-hover table-striped">
        <thead>
        <tr>
            <th>序号</th>
            <th>日期</th>
            <th>学院</th>
            <th>班级名称</th>
            <th>讲师姓名</th>
            <th>应到人数</th>
            <th>实到人数</th>
            <th>缺勤人数</th>
            <th>出勤率</th>
            <th>点名人</th>
            <th>备注</th>
            <th>操作</th>
        </tr>


        </thead>
        <tbody></tbody>
    </table>
</div>
<script>
    $(function () {
        loadData();
        //加载班级数据到对应的下拉框
        $.get(
            "/rcclass/list",
            function (data) {
                for (var i in data ){
                    var option=$("<option></option>");
                    option.val(data[i].id)
                    option.text(data[i].college+"-"+data[i].className)
                    $("#class").append(option)
                }
            }
        )


        $("#class").change(function () {
            var classId=$(this).val();//重新获取班级id
            var userId=$("#user").val();
            $("tbody").empty();
            loadData(classId,userId)
        })
        $("#user").change(function () {
            var classId=$("#class").val()
            var userId=$(this).val()
            $("tbody").empty();
            loadData(classId,userId)
        })
        $.get(
            "/user/list",
            function (data) {
                for (var i in data ){
                    var option=$("<option></option>")
                    option.val(data[i].id)
                    option.text(data[i].name);
                    $("#user").append(option)
                }
            }
        )
    })
    function loadData(classId,userId) {
        $.get(
            "/attendance/list",
            {"classId":classId,"userId":userId},
            function  (data) {
                if (data.length==0||data==null){
                    alert("没查找到结果")
                    return;
                }
            for (var i in data){
                var tr=$("<tr></tr>");
                tr.append("<td>"+data[i].id+"</td>");
                tr.append("<td>"+data[i].checkDate+"</td>");
                tr.append("<td>"+data[i].rcClass.college+"</td>");
                tr.append("<td>"+data[i].rcClass.className+"</td>");
                tr.append("<td>"+data[i].rcClass.teacherName+"</td>");
                tr.append("<td>"+data[i].rcClass.studentNum+"</td>");
                tr.append("<td>"+data[i].attendancePersonNum+"</td>");
                tr.append("<td>"+data[i].absencePersonNum+"</td>");
                tr.append("<td>"+data[i].attendanceRate*100+"%"+"</td>");
                tr.append("<td>"+data[i].rcUser.name+"</td>");
                tr.append("<td>"+data[i].remark+"</td>");
                tr.append("<td></td>");
                $("tbody").append(tr);


            }
        })
    }


</script>
</body>
</html>
